<template>
  <div class="app-container">
      <div class="header">
         <el-form :model="queryParams" ref="queryRef" :inline="true">
            <el-form-item prop="status">
               <!-- <el-tree-select
                  v-model="queryParams.serviceId"
                  :data="deptTreeData"
                  :props="{ value: 'id', label: 'label', children: 'children' }"
                  :render-after-expand="false"
                  show-checkbox
                  value-key="id"
                  check-strictly
                  placeholder="请选择服务区"
                  class="with-240"
               /> -->
               <el-select
                  v-model="queryParams.serviceId"
                  placeholder="请选择服务区"
                  clearable
                  class="with-180"
               >
                  <el-option
                     v-for="item in deptListData"
                     :key="item.id"
                     :label="item.label"
                     :value="item.id"
                  />
               </el-select>
            </el-form-item>

            <el-form-item class="with-200">
               <el-date-picker
                  v-model="queryParams.visitDate"
                  value-format="YYYY-MM-DD"
                  type="date"
                  :disabled-date="disabledDate"
               ></el-date-picker>
            </el-form-item>

            <!-- <el-form-item prop="carTypeCode">
               <el-select
                  v-model="queryParams.carTypeCode"
                  placeholder="请选择车型"
                  clearable
                  class="with-180"
               >
                  <el-option
                     v-for="item in car_type"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"
                  />
               </el-select>
            </el-form-item> -->

            <el-form-item>
               <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
         </el-form>

         <div>
         <el-button
         type="primary"
         plain
         @click="handleSelect('chart')"
         :class="isShowChart ? 'is-active' : ''"
         >图表显示</el-button>
         <el-button
            type="primary"
            plain
            @click="handleSelect('table')"
            :class="!isShowChart ? 'is-active' : ''"
         >表格显示</el-button>
         <!-- <el-button
               plain
               icon="Download"
               @click="handleExport"
         >下载</el-button> -->
         </div>
      </div>
      
      <div class="echarts-wrap" v-if='isShowChart'>
        <sBuss :statisticData="sBussRemainderList"></sBuss>
        <bBuss :statisticData="bBussRemainderList"></bBuss>
        <over-park :sBussData="sBussOverList" :bBussData="bBussOverList"></over-park>
      </div>
      <park-table :queryParams="queryParams" ref="parkRef" v-else></park-table>
  </div>
</template>

<script setup>
import { parkStatistic } from '@/api/bigData/park'
import sBuss from "./components/sBuss.vue";
import bBuss from "./components/bBuss.vue";
import overPark from "./components/overPark.vue";
import parkTable from "./components/table.vue";
import useUserStore from '@/store/modules/user'
const { proxy } = getCurrentInstance();
const queryParams = reactive({
    serviceId:"",
    visitDate:null,
    carTypeCode: null
});
const parkRef = ref()
const sBussRemainderList = ref([]);
const bBussRemainderList = ref([]);
const sBussOverList = ref([]);
const bBussOverList = ref([]);

const isShowChart = ref(true)
const { car_type} = proxy.useDict("car_type");

const deptListData = computed(()=>{
   const list  = useUserStore().deptListData;
   return list.filter(ele => ele?.deptType == "1").map(ele => {
      return {
         id: ele.deptId,
         label: ele.deptName,
      }
   })
})

const disabledDate = (time) =>{
   return time.getTime() > Date.now();
}

const resetQuery = ()=> {
   setDefaultDate()
   proxy.resetForm("queryRef");
   handleQuery();
}

const handleQuery = ()=>{
  if(isShowChart.value){
    getList();
  }
  else{
    parkRef.value.getList()
  }
}

const getList = ()=>{
   proxy.$modal.loading("正在加载服务监控数据，请稍候！");
   parkStatistic(queryParams).then(response => {
      const data = response?.data || {};
      sBussRemainderList.value = data?.sBussRemainderNumList || [];
      bBussRemainderList.value = data?.bBussRemainderNumList || [];
      sBussOverList.value = data?.sBussOverstepNumList || [];
      bBussOverList.value = data?.bBussOverstepNumList || [];
      proxy.$modal.closeLoading();
   }).catch(() => {
      proxy.$modal.closeLoading();
   });
}

const handleSelect = (type) => {
  isShowChart.value = type === "chart" ? true : false;
  if(type === "chart") {
    getList()
  }
}

const setDefaultDate = () =>{
  queryParams.visitDate = proxy.parseTime(new Date(),'{y}-{m}-{d}');
  queryParams.serviceId  = deptListData.value[0]?.id;
}

const handleExport = () =>{
  proxy.download("system/dict/data/export", {
    ...queryParams.value
  }, `dict_data_${new Date().getTime()}.xlsx`);
}
setDefaultDate();
getList();
</script>
<style lang="scss" scoped>
  .app-container{
   .header{
      display: flex;
      justify-content: space-between;
      .el-form{
         flex:1
      }
   }
   .echarts-wrap{
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
   }
   .is-active{
      background-color: var(--el-button-active-bg-color);
   }
   .el-button:active{
      background: var(--el-color-primary-light-9);
   }
  }
  
</style>
